<template>
  <div class="alert">
    <div class='left'>
      <img src="../../assets/images/left.png" alt="">
    </div>
    <div class='left-down'>
      <img src="../../assets/images/left_down.png" alt="">
    </div>
    <div class='right'>
      <img src="../../assets/images/right.png" alt="">
    </div>
    <div class='right-down'>
      <img src="../../assets/images/right_down.png" alt="">
    </div>
    <div class="title">
      <div>报警实时信息</div>
      <div class="tit-btn">重点监控
        <img src="../../assets/images/left.png" class='left' alt="">
        <img src="../../assets/images/left_down.png" class='left-down' alt="">
        <img src="../../assets/images/right.png" class='right' alt="">
        <img src="../../assets/images/right_down.png" class='right-down' alt=""></div>
    </div>
    <div class="content">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr class="head" ref="head">
          <th>&nbsp;&nbsp;车牌号</th>
          <th>司机</th>
          <th>货物</th>
          <th>线路</th>
          <th>北斗时间</th>
          <th>&nbsp;&nbsp;报警状态</th>
          <th>报警来源</th>
          <th>处理情况</th>
        </tr>
        <tr class="row" style="color: red">
          <td><i class="alert-icon el-icon-warning"></i>浙B886H
          </td>
          <td>王超</td>
          <td>特种物资</td>
          <td>京广线</td>
          <td>2018-01-09 20:00</td>
          <td><i class="alert-icon dot"></i>超速警示</td>
          <td>人工警示</td>
          <td>
            <div class="num-item">未</div>
            <div class="num-item">处</div>
            <div class="num-item">理</div>
          </td>
        </tr>
        <tr class="row dom">
          <td><i class="alert-icon"></i>浙B886H</td>
          <td>王超</td>
          <td>特种物资</td>
          <td>京广线</td>
          <td>2018-01-09 20:00</td>
          <td><i class="alert-icon dot" style="background: #50cf77"></i>超速警示</td>
          <td>人工警示</td>
          <td>
            <div class="num-item">未</div>
            <div class="num-item">处</div>
            <div class="num-item">理</div>
          </td>
        </tr>
        <tr class="row">
          <td><i class="alert-icon"></i>浙B886H</td>
          <td>王超</td>
          <td>特种物资</td>
          <td>京广线</td>
          <td>2018-01-09 20:00</td>
          <td><i class="alert-icon dot" style="background: yellow"></i>超速警示</td>
          <td>人工警示</td>
          <td>
            <div class="num-item">未</div>
            <div class="num-item">处</div>
            <div class="num-item">理</div>
          </td>
        </tr>
        <tr class="row dom">
          <td><i class="alert-icon"></i>浙B886H</td>
          <td>王超</td>
          <td>特种物资</td>
          <td>京广线</td>
          <td>2018-01-09 20:00</td>
          <td><i class="alert-icon dot" style="background: orange"></i>超速警示</td>
          <td>人工警示</td>
          <td>
            <div class="num-item">未</div>
            <div class="num-item">处</div>
            <div class="num-item">理</div>
          </td>
        </tr>

      </table>
      <div class="pag">
        <el-pagination
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "alert",
    data() {
      return {
        header: [
          {}
        ]
      }
    },
    mounted() {
      // let len = this.$refs.head.getElementsByTagName('th').length
      // for (let i = 0; i++; i < len) {
      //   // this.$refs.head.getElementsByTagName('th')[i].style.width = (100 / len) + '%'
      // }
    }
  }
</script>

<style lang="scss">
  .alert {
    width: 100%;
    height: 60px;
    border: 1px solid #1B4B98;
    -webkit-box-shadow: inset 0 0 10px #1B4B98;
    -moz-box-shadow: inset 0 0 10px #1B4B98;
    box-shadow: inset 0 0 10px #1B4B98;
    color: #6081A6;
    position: relative;
    height: 307px;
    margin-top: 20px;
    box-sizing: border-box;
    border: 1px solid #1B4B98;
    -webkit-box-shadow: inset 0 0 10px #1B4B98;
    -moz-box-shadow: inset 0 0 10px #1B4B98;
    box-shadow: inset 0 0 10px #1B4B98;
    position: relative;
    .num-item {
      box-sizing: border-box;
      float: left;
      text-align: center;
      color: #fff;
      height: 30px;;
      line-height: 30px;;
      width: 20px;
      margin-right: 2px;
      background: url("../../../static/bg.png") no-repeat center;
      background-size: cover;
    }
    .title {
      height: 50px;
      line-height: 50px;
      background: #0A193B;
      padding: 0 10px;
      color: #6082A7;
      box-shadow: inset 6px 0 10px -5px rgba(27, 75, 152, .6), inset -6px 0 10px -5px rgba(27, 75, 152, .6);
      div {
        font-size: 14px;
        float: left;
      }
      .tit-btn {
        position: relative;
        height: 30px;
        line-height: 30px;
        padding: 0 15px;
        margin: 10px;
        color: #00c0ff;
        border: 1px solid #1B4B98;
        cursor: pointer;
        .left {
          width: 9px;
          height: 9px;
          position: absolute;
          top: 0px;
          left: 0px;
        }
        .left-down {
          width: 9px;
          height: 9px;
          position: absolute;
          bottom: 0px;
          left: 0px;
        }
        .right-down {
          width: 9px;
          height: 9px;
          position: absolute;
          bottom: 0px;
          right: 0px;
        }
        .right {
          width: 9px;
          height: 9px;
          position: absolute;
          top: 0px;
          right: 0px;
        }
      }
      div:last-child {
        float: right;
      }
    }
    .left {
      position: absolute;
      top: -5px;
      left: 0px;
    }
    .left-down {
      position: absolute;
      bottom: -2px;
      left: 0px;
    }
    .right-down {
      position: absolute;
      bottom: -2px;
      right: 0px;
    }
    .right {
      position: absolute;
      top: -2px;
      right: 0px;
    }
    .content {
      table {
        width: 100%;
        background: red;

        .head {
          th {
            background: #0A0919;
            padding: 0 10px;
            height: 40px;
            line-height: 40px;
            text-align: left;
          }
        }
        .row {
          border: none;
          td {
            background: #091737;
            padding: 0 10px;
            height: 42px;
            line-height: 42px;
            text-align: left;
          }
          .alert-icon {
            width: 10px;
            height: 10px;
            display: block;
            float: left;
            margin-top: 12px;
            margin-right: 10px
          }
          .dot {
            margin-right: 8px;
            border-radius: 50%;
            width: 14px;
            height: 14px;
            background: red;
          }
        }

      }
      .pag {
        overflow: hidden;
        text-align: center;
        height: 45px;
        background: #091737;
        .el-pagination {
          margin-top: 10px;
        }
        .el-pagination .btn-next, .el-pagination .btn-prev {
          background: center center no-repeat #091737 !important;
          color: #6284A9;
        }
        .el-pager li {
          color: #6284A9;
          background: center center no-repeat #091737 !important;
        }
        .el-pager li.active {
          color: #fff;
        }
      }
    }
    .dom {
      td {
        background: #0A0919 !important;
      }
    }
  }

</style>
